<template>
  <!--
  平台管理页面
  -->
  <div class="table-classic-wrapper1">
    <el-card shadow="always">

      <el-card shadow="hover" class="cardShow">
        <el-table
            :data="feeData"
            style="width: 100%;margin-top: 100px"
            :header-cell-style="{textAlign: 'center'}"
            @selection-change="handleSelectionChange"
            :cell-style="{textAlign: 'center'}"
            class="table-inline-edit">

          <el-table-column type="selection" width="50"/>

          <el-table-column
              prop="id"
              label="编号"
              width="50">
          </el-table-column>

          <el-table-column label="餐厅等级" >
            <template slot-scope="scope">
              <el-rate
                  v-model="scope.row.rate"
                  disabled
                  show-score
                  text-color="#ff9900">
              </el-rate>
            </template>
          </el-table-column>

          <el-table-column label="平台费率" >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.fee === '5%'" type="danger" style="width: 70px">{{scope.row.fee}}</el-tag>
              <el-tag v-if="scope.row.fee === '4%'" type="warning" style="width: 70px">{{scope.row.fee}}</el-tag>
              <el-tag v-if="scope.row.fee === '3%'" type="info" style="width: 70px">{{scope.row.fee}}</el-tag>
              <el-tag v-if="scope.row.fee === '2%'" type="success" style="width: 70px">{{scope.row.fee}}</el-tag>
              <el-tag v-if="scope.row.fee === '1%'" style="width: 70px">{{scope.row.fee}}</el-tag>
            </template>
          </el-table-column>

        </el-table>
      </el-card>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "AdministratorPlatform",
  data() {
    return {
      /**
       * 平台收费标准
       */
      feeData:[
        {
          id:'1',
          rate:'5',
          fee:'5%',
        },
        {
          id:'2',
          rate:'4',
          fee:'4%',
        },
        {
          id:'3',
          rate:'3',
          fee:'3%',
        },
        {
          id:'4',
          rate:'2',
          fee:'2%',
        },
        {
          id:'5',
          rate:'1',
          fee:'1%',
        }

      ],

      /**
      * 多选数据暂存数组
      */
      multipleSelection: [],
    }
  },
  methods:
      {
        /**
        * 多选操作，与multipleSelection相对应
        */
        handleSelectionChange(val) {
          this.multipleSelection = val
        }
      }
}
</script>

<style scoped>
.cardShow {
  margin: 0 auto;
  width: 1000px;
}
</style>
